import QtQuick 1.1
import "../Components"

AndroidItem {
    id: _root
    width: 540 * viewScale
    height: width

    property int mode: 0                //0:ロック画面, 1:ナビキー

    property bool hasHandle: false      //ハンドルを掴んでるか
    property real animX: 0              //アニメーションの開始位置
    property real animY: 0              //アニメーションの開始位置
    property real animR: 0              //アニメーションの開始位置

    signal unlocked()

    function startCircleAnime(){
        _handleCircleAnim.start();
    }

    Component.onCompleted: {
        var i=0;
        var k=0;
        var cx = _root.width / 2;   //中心
        var cy = _root.height / 2;  //中心
        var r;      //半径
        var c;      //個数
        var rad;    //基準ラジアン
        var clist = [8, 14, 20];

        for(k=0; k<11; k++){
            r = (30 + k * 24) * viewScale;
            c = 8 + k * 6;
            rad = 2 * Math.PI / c;
            for(i=0; i<c; i++){
                _lock_touch_marks.model.append({"_source": _lock_touch_mark
                                                   , "_cx": r * Math.sin(i * rad) + cx
                                                   , "_cy": r * Math.cos(i * rad) + cy})
            }
        }
    }

    //細かい○
    Component{
        id: _lock_touch_mark
        Image{
            width: 12 * viewScale
            height: 12 * viewScale
            opacity: 0
            property real cx: 0
            property real cy: 0
            source: "images/lock_touch_mark.png"
        }
    }
    Repeater{
        id: _lock_touch_marks
        model: ListModel{
        }
        Loader{
            sourceComponent: _source
            onLoaded: {
                item.x = _cx - item.width * 0.5;
                item.y = _cy - item.width * 0.5;
                item.cx = _cx;
                item.cy = _cy;
            }
        }
    }

    Item{
        id: _circleItems
        width: parent.width
        height: parent.height
        opacity: 0
        property real xScale: 0.8
        property real yScale: 0.8
        transform: Scale{
            origin.x: width * 0.5
            origin.y: height * 0.5
            xScale: _circleItems.xScale
            yScale: _circleItems.yScale
        }
        //円
        Rectangle{
            width: parent.width
            height: width
            radius: width * 0.5
            color: "#00000000"
            opacity: 0.5
            border.color: "#ffffff"
            border.width: 2
        }
        //カメラ
        Image{
            id: _camera
            x: - width * 0.5
            anchors.verticalCenter: parent.verticalCenter
            width: 216 * viewScale
            height: 216 * viewScale
            source: "images/ic_lockscreen_camera_normal.png"
            property bool isActive: false
            states:State{
                when: _camera.isActive
                PropertyChanges {
                    target: _camera
                    source: "images/ic_lockscreen_camera_activated.png"
                }
            }
        }
        //Google
        Image{
            id: _google
            anchors.horizontalCenter: parent.horizontalCenter
            y: - height * 0.5
            width: 216 * viewScale
            height: 216 * viewScale
            source: "images/ic_lockscreen_google_normal.png"
            property bool isActive: false
            states:[
                State{
                    when: _google.isActive && mode === 1
                    PropertyChanges {
                        target: _google
                        opacity: 1
                    }
                },
                State{
                    when: _google.isActive
                    PropertyChanges {
                        target: _google
                        source: "images/ic_lockscreen_google_activated.png"
                    }
                }
            ]
        }
        //アンロック
        Image{
            id: _unlock
            x: parent.width - width * 0.5
            anchors.verticalCenter: parent.verticalCenter
            width: 216 * viewScale
            height: 216 * viewScale
            source: "images/ic_lockscreen_unlock_normal.png"
            property bool isActive: false
            states:State{
                when: _unlock.isActive
                PropertyChanges {
                    target: _unlock
                    source: "images/ic_lockscreen_unlock_activated.png"
                }
            }
        }
        states: [
            State{
                when: _root.hasHandle
                PropertyChanges {
                    target: _circleItems
                    xScale: 1
                    yScale: 1
                    opacity: 1
                }
            }
        ]
        transitions: Transition {
            NumberAnimation{
                target: _circleItems
                properties: "xScale,yScale,opacity"
                duration: 200
                easing.type: Easing.OutCubic
            }
        }
    }


    //ハンドル
    ImageButton{
        id: _handle
        anchors.centerIn: parent
        width: 216 * viewScale
        height: 216 * viewScale
        imageIdle: "../Android/images/ic_lockscreen_handle_normal.png"
        imagePress: "../Android/images/ic_lockscreen_handle_pressed.png"
    }
    //ハンドルを戻すアニメーション
    SequentialAnimation{
        id: _handleBackAnim
        running: false
        ScriptAction{
            script: {
                _handleAnimeTimer.mode = 0;
                _handleAnimeTimer.start();
            }
        }
        ParallelAnimation{
            NumberAnimation{
                target: _root
                property: "animX"
                to: _root.width * 0.5
                duration: 100
                easing.type: Easing.OutCubic
            }
            NumberAnimation{
                target: _root
                property: "animY"
                to: _root.height * 0.5
                duration: 100
                easing.type: Easing.OutCubic
            }
        }
        ScriptAction{
            script: {
                //ハンドルを再表示
                _handle.opacity = 1;
                _handleAnimeTimer.stop();
                //続きを開始
                if(mode === 0){
                    _handleCircleAnim.start();
                }else{
                    viewTouchMarks(_root.animX, _root.animY, false);
                }
            }
        }
    }
    //ハンドルを円状に表示するアニメーション
    SequentialAnimation{
        id: _handleCircleAnim
        running: false
        ScriptAction{
            script: {
                //ハンドルを再表示
                _handle.opacity = 1;
                //ここから円状に広げる
                _handleAnimeTimer.mode = 1;
                //再スタート
                _handleAnimeTimer.start();
            }
        }
        NumberAnimation{
            target: _root
            property: "animR"
            from: 0
            to: 1.1 * _root.width / 2
            duration: 800
            easing.type: Easing.OutCubic
        }
        ScriptAction{
            script: {
                _handleAnimeTimer.stop();
                viewTouchMarks(_root.animX, _root.animY, false);
            }
        }
    }
    //ハンドルを描画するタイマー
    Timer{
        id: _handleAnimeTimer
        interval: 33
        repeat: true
        running: false
        property int mode: 0    //0:戻す, 1:円で広がる
        onTriggered: {
            if(mode == 0){
                viewTouchMarks(_root.animX, _root.animY, true);
            }else if(mode == 1){
                viewCircleMarks(_root.width * 0.5, _root.height * 0.5, _root.animR);
            }else{
            }
        }
    }

    //マウス
    MouseArea{
        id: _handleArea
        anchors.fill: parent
        onPressed: {
            mousePress(mouse.x, mouse.y);
        }
        onMousePositionChanged: {
            mousePositionChange(mouse.x, mouse.y);
        }
        onReleased: {
            mouseRelease(mouse.x, mouse.y);
        }

    }

    function mousePress(x, y){
        if(checkHit(_handle, x, y)){
            hasHandle = true;
            _handle.opacity = 0;
            viewTouchMarks(x, y, true);
        }
    }
    function mousePositionChange(x, y){
        if(hasHandle){
            var pos = checkInCircle(x, y);
            if(pos > 0){
                //円の外
                _unlock.isActive = false;
                _google.isActive = false;
                _camera.isActive = false;
                switch(pos){
                case 0:
                    break;
                case 1:
                    _unlock.isActive = true;
                    break;
                case 2:
                    _google.isActive = true;
                    break;
                case 3:
                    _camera.isActive = true;
                    break;
                default:
                    break;
                }
            }else if(checkHit(_unlock, x, y, _unlock.isActive)){
                _unlock.isActive = true;
            }else if(checkHit(_google, x, y, _google.isActive)){
                _google.isActive = true;
            }else if(checkHit(_camera, x, y, _camera.isActive)){
                _camera.isActive = true;
            }else{
                _unlock.isActive = false;
                _google.isActive = false;
                _camera.isActive = false;
            }

            //ナビキーの時
            if(mode === 1){
                _unlock.isActive = false;
                _camera.isActive = false;
            }

            viewTouchMarks(x, y, !(_unlock.isActive | _google.isActive | _camera.isActive));
        }
    }
    function mouseRelease(x, y){
        if(hasHandle){
            if(_unlock.isActive){
                //ロック画面解除
                _root.unlocked();
            }
            //ハンドルを戻すアニメーション
            animX = x;
            animY = y;
            _handleBackAnim.start();
        }else{
            //ハンドルを円状に表示するアニメーション
            _handleCircleAnim.start();
        }
        hasHandle = false;
    }

    //当たり判定。now==trueにすると判定が甘くなる。入りはきつくて出は緩くしてプルプルするのを防ぐ
    function checkHit(obj, x, y, now){
        var ret = false;
        var adj = now ? 10 : 0;
        if((obj.x + adj) < x && x < (obj.x + obj.width - adj)
                && (obj.y + adj) < y && y < (obj.y + obj.height - adj)){
            ret = true;
        }
        return ret;
    }
    //ハンドルの円とどれに当てるか
    //0:円の中
    //1:アンロック
    //2:グーグル
    //3:カメラ
    function checkInCircle(x, y){
        var ret = 0;
        var cx = _root.width / 2;   //中心
        var cy = _root.height / 2;  //中心
        var r = cx;
        var at = 0;
        if(Math.pow(x - cx, 2) + Math.pow(y - cy, 2) > Math.pow(r, 2)){
//                console.debug("ATAN:" + Math.atan2(x - cx, y - cy) / Math.PI);
            at = Math.atan2(x - cx, y - cy);
            if(at >= 0 && at < 3 * Math.PI / 4){
                ret = 1;
            }else if(at < 0 && at > -3 * Math.PI / 4){
                ret = 3;
            }else{
                ret = 2;
            }
        }
        return ret;
    }
    //ハンドルを表示
    function viewTouchMarks(x, y, is){
        var i=0;
        var item;
        var r = [30 * viewScale, 60 * viewScale, 90 * viewScale];

        for(i=0; i<_lock_touch_marks.count; i++){
            item = _lock_touch_marks.itemAt(i).item;
            if(!is){
                _lock_touch_marks.itemAt(i).item.opacity = 0;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[0], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 1;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[1], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 0.6;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[2], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 0.3;
            }else{
                _lock_touch_marks.itemAt(i).item.opacity = 0;
            }
        }
    }
    //ハンドルを円状に表示
    function viewCircleMarks(x, y, rr){
        var i=0;
        var item;
        var r = [0, 0, 0, 0];

        for(i=0; i<r.length; i++){
            r[i] = (rr - i * 25 * viewScale);
            if(r[i] < 0){
                r[i] = 0;
            }
        }

        for(i=0; i<_lock_touch_marks.count; i++){
            item = _lock_touch_marks.itemAt(i).item;
            if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[3], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 0;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[2], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 0.3;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[1], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 0.6;
            }else if(Math.pow(x - item.cx, 2) + Math.pow(y - item.cy, 2) < Math.pow(r[0], 2)){
                _lock_touch_marks.itemAt(i).item.opacity = 1;
            }else{
                _lock_touch_marks.itemAt(i).item.opacity = 0;
            }
        }

    }


    StateGroup{
        states: [
            State{
                name: "naviKey"
                when: mode === 1
                PropertyChanges {
                    target: _google
                    opacity: 0.8
                    source: "images/ic_lockscreen_google_activated.png"
                }
                PropertyChanges {
                    target: _camera
                    visible: false
                }
                PropertyChanges {
                    target: _unlock
                    visible: false
                }
            }
        ]
    }
    StateGroup{
        states: [
            State{
                name: "naviKeyAndLand"
                when: mode === 1 && !isPortrait
                PropertyChanges {
                    target: _google
                    x: -width * 0.5
                }
                AnchorChanges{
                    target: _google
                    anchors.horizontalCenter: null
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        ]
    }
}
